import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar } from 'react-vant'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { Card } from 'react-vant'

const Detail = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const v = location.state
  return (
    <div>
      <NavBar title="详情" leftText="返回" onClickLeft={() => navigate(-1)} />
      <>
        <Card round style={{ marginBottom: 20 }}>
          <Card.Body>
            <img src={v.img} alt="" />
          </Card.Body>
        </Card>
        <Card round>
          <Card.Header>{v.title}</Card.Header>
          <Card.Body>{v.word}</Card.Body>
        </Card>
      </>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text="购物车"
          onClick={() => console.log('cart click')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button
          type="danger"
          text="立即购买"
          onClick={() => console.log('button click')}
        />
      </ActionBar>
    </div>
  )
}
export default Detail
